<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="${ctxPath}/static/sui/semantic.amazon.min.css">
  <script src="${ctxPath}/static/sui/jquery-3.1.1.min.js"></script>
  <script src="${ctxPath}/static/sui/semantic.min.js"></script>
  <script src="${ctxPath}/static/js/pinterest_grid.js"></script>
  <!--[if IE]>
  <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
  <style>
    body {
      padding: 20px
    }
    #gallery-wrapper {
      position: relative;
      max-width: 95%;
      width: 95%;
      margin:50px auto;
    }
    img.thumb {
      width: 100%;
      max-width: 100%;
      height: auto;
    }
    .white-panel {
      position: absolute;
      background: white;
      border-radius: 5px;
      box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
      padding: 10px;
    }
    .white-panel h1 {
      font-size: 1em;
    }
    .white-panel h1 a {
      color: #0C7B98;
      font-size: 15px;
    }
    .white-panel:hover {
      box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
      margin-top: -5px;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
  </style>
</head>

<body>

<div class="ui fixed menu" style="padding-left: 20px;padding-top:10px;">
  <div class="ui huge breadcrumb">
    @for(nav in navs){
      @if(navLP.last){
        <div class="active section">${nav.name}</div>
      @}
      @if(!navLP.last){
        <a class="section" href="/sutexture/list?directory=${nav.path}">${nav.name}</a>
        <i class="right chevron icon divider"></i>
      @}
    @}
  </div>
</div>
<section id="gallery-wrapper">
  @for(texture in textures){
  <article class="white-panel">
    @if(texture.file) {
    <img src="/static/img/square-image.png" data-src="/sketchup/texture/${texture.path}" class="thumb">
    @}
    @if(!texture.file) {
    <img class="thumb" onclick="window.location.href='/sutexture/list?directory=${texture.path}'" src="/static/img/folder.png">
    @}
    @if(!texture.file) {
    <h1><a class="header" href="/sutexture/list?directory=${texture.path}">${texture.name}</a></h1>
    <p></p>
    @}
    @if(texture.file) {
    <h1>
      <a furl="${texture.path}" fname="${texture.name}" class="load_texture" href="###">加载材质</a>
      <a furl="${texture.path}" fname="${texture.name}" class="download_texture" href="###">下载贴图</a>
    </h1>
    <p></p>
    @}
  </article>
  @}
</section>

<script type="text/javascript">
  $(function () {
    $("#gallery-wrapper").pinterest_grid({
      no_columns: 5,
      padding_x: 10,
      padding_y: 10,
      margin_bottom: 50,
      single_column_breakpoint: 700
    });
    $('.white-panel img')
    .visibility({
      type       : 'image',
      transition : 'fade in',
      duration   : 1000
    })
    ;
    $('.download_texture').click(function (e) {
      e.preventDefault();
      sketchup.download($(this).attr('furl'),$(this).attr('fname'));
    });
    $('.load_texture').click(function (e) {
      e.preventDefault();
      sketchup.load_as_texture($(this).attr('furl'),$(this).attr('fname'));
    });
  });
</script>
</body>
</html>